<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="static/css/mdui.min.css" crossorigin="anonymous" />
    <script src="static/js/mdui.min.js" crossorigin="anonymous"></script>
    <script src="static/js/http.js" crossorigin="anonymous"></script>
    <title>登录</title>
</head>

<html>

<body class="mdui-theme-primary-indigo mdui-theme-layout-auto mdui-theme-accent-indigo">
    <div class="mdui-card">
        <div class="mdui-progress mdui-hidden" id="mdui_loading">
            <div class="mdui-progress-indeterminate"></div>
        </div>

        <div class="mdui-card-primary mdui-color-theme">
            <div class="mdui-card-primary-title">
                <div style="text-align: center;">HR系统登录</div>
            </div>
        </div>
        <form name="loginForm" action="login" method="POST">
            <div class="mdui-card-content mdui-p-t-1 mdui-card-primary">
                <div class="mdui-textfield mdui-textfield-floating-label">
                    <i class="mdui-icon material-icons">account_circle</i>
                    <div class="mdui-textfield-label">用户名</div>
                    <input class="mdui-textfield-input" name='username' type="username" id="login_username" required />
                    <div class="mdui-textfield-error">请输入用户名</div>
                </div>

                <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                    <i class="mdui-icon material-icons">vpn_key</i>
                    <div class="mdui-textfield-label">密码</div>
                    <input class="mdui-textfield-input" name="passwd" type="password" id="login_password" required />
                    <div class="mdui-textfield-error">请输入密码</div>
                </div>
            </div>

            <div class="mdui-card-actions mdui-card-actions-stacked mdui-p-t-1">
                <button type="button" onclick="login()"
                    class="mdui-btn mdui-btn-block mdui-ripple mdui-color-theme ">登录</button>
                <button type="button" onclick="window.location.href = 'register.html'"
                    class="mdui-btn mdui-ripple mdui-btn-block mdui-color-cyan-100">注册</button>
            </div>
        </form>
    </div>
</body>

</html>

<script>
    var isFail = getQueryVariable('fail')
    // console.log(isFail)
    if (isFail == 'true') {
        // console.log('do it')
        mdui.snackbar({
            message: '登录失败，请检查用户名和密码',
            position: 'top',
            timeout: '3000',
            buttonColor: 'red'
        });
        // 把url参数在不刷新的状态下拿掉
        var url = location.pathname
        history.pushState({url: url, title: document.title}, document.title, url)
    }

    var isReg = getQueryVariable('reg')
    // console.log(isFail)
    if (isReg == 'true') {
        // console.log('do it')
        mdui.snackbar({
            message: '注册成功，请登录',
            position: 'top',
            timeout: '3000',
            buttonColor: 'red'
        });
        // 把url参数在不刷新的状态下拿掉
        var url = location.pathname
        history.pushState({url: url, title: document.title}, document.title, url)
    }

    var isExpire = getQueryVariable('expired')
    // console.log(isFail)
    if (isExpire == 'true') {
        // console.log('do it')
        mdui.snackbar({
            message: '请先登录',
            position: 'top',
            timeout: '3000',
            buttonColor: 'red'
        });
        // 把url参数在不刷新的状态下拿掉
        var url = location.pathname
        history.pushState({url: url, title: document.title}, document.title, url)
    }

    
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) { return pair[1]; }
        }
        return (false);
    }

    function login() {
        //普通get请求
        // var url = '/login'


        var username = document.getElementById('login_username')
        var passwd = document.getElementById('login_password')

        // console.log(username.validity.valueMissing)
        // console.log(passwd.validity.valueMissing)
        // console.log(document.forms["loginForm"])

        if (username.validity.valueMissing == true) {
            username.setCustomValidity("请输入用户名")
            username.reportValidity()
            return
        }

        if (passwd.validity.valueMissing == true) {
            passwd.setCustomValidity("请输入密码")
            passwd.reportValidity()
            return
        }

        document.getElementById('mdui_loading').className = 'mdui-progress'
        document.forms["loginForm"].submit()



        // username.addEventListener("input", function (event) {
        //     if (username.validity.valueMissing) {
        //         username.setCustomValidity("badddd");
        //         console.log(document.forms["loginForm"].reportValidity())
        //     } else {
        //         username.setCustomValidity("");
        //     }
        // });
        // setTimeout(function () {
        //     // 把 loading 指示去掉
        //     document.getElementById('mdui_loading').className = 'mdui-progress mdui-hidden'
        // }, 3000);
        // document.forms['loginForm'].submit()
        // console.log(document.forms['loginForm']['username'].value)
        // console.log(document.forms['loginForm']['passwd'].value)
        // http.post(url, function (err, result) {
        //     // 这里对结果进行处理
        //     console.log(result)
        //     document.getElementById('mdui_loading').className = 'mdui-progress mdui-hidden'
        // });
    }
</script>
<style>
    .mdui-card {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 88%;
        max-width: 340px;
        max-height: 90%;
        transform: translate(-50%, -50%);
        overflow: auto;
    }

    .mdui-card .mdui-progress {
        position: relative;
        top: 0;
        z-index: 1;
    }

    .mdui-card .mdui-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
</style>